<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet"  href="/css/logo.css" />
</head>
<style>

    .el-input {
        width: 370px;
    }
</style>
<body >
<div id = 'app' class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form method="post" action="/doLogin" class="form" id="form1" onsubmit="return encry()">
            <h2 class="form__title">登录</h2>
            <input v-model="vname"  id="name"  name="encryUsername" type="text" placeholder="用户名" class="input" />
<!--            <input v-model="vname"  id="name"  name="encryUsername"  />-->
<!--            <input type="email" placeholder="Email" class="input" />-->
            <input  id="pass" name="encryPassword" type="password" placeholder="密码" class="input" />
            <button  type="submit" class="btn">登录</button>
            <p th:text="${msg}" style="color: red"></p>
        </form>
    </div>

<!--    &lt;!&ndash; Sign In &ndash;&gt;
    <div class="container__form container&#45;&#45;signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">Sign In</h2>
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <a href="#" class="link">Forgot your password?</a>
            <button class="btn">Sign In</button>
        </form>
    </div>-->

    <!-- Overlay -->
    <div class="container__overlay">

        <div class="overlay">
<!--            <div class="overlay__panel overlay&#45;&#45;left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay__panel overlay&#45;&#45;right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>-->
        </div>
    </div>
</div>


<!--<img src="../static/image/newyear.png" th:src="@{/static/image/newyear.png}">-->
<!--<div id="app">
</div>-->
</body>

<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../static/js/jsencrypt.js" th:src="@{/js/jsencrypt.js}"></script>
<script type="text/javascript" src="../static/js/base64.js" th:src="@{/js/base64.js}"></script>
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript">
/*    if (top.location != location){
        alert("过期了")
        top.location.href = location.href;
    }*/
</script>
<script  language='javascript' th:inline="javascript">
    function sleep(d){
        for(var t = Date.now();Date.now() - t <= d;);
    }

    // sleep(5000); //暂停5秒

    function encry() {
        var _pass = document.getElementById("pass").value;
        var _name = document.getElementById("name").value;
        var pubkey =  [[${publicKey}]]
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubkey);
        var encryName = encrypt.encrypt(BASE64.encoder(_name))
        var encryPass = encrypt.encrypt(BASE64.encoder(_pass))
        document.getElementById("pass").value = encryPass
        // $('pass').val( encrypt.encrypt(BASE64.encoder(_pass)))
        //  $('#name').val( encryName)
        jsfunction()
        // document.getElementById("name").value = encryName
        // console.log(document.getElementById("name").value)
        // console.log(document.getElementById("pass").value)
        // alert(document.getElementById("pass").value)
        sleep(800); //暂停5秒
        return true

    }
    new Vue({
        el: '#app',
        data: function () {
            return {
                username : [[${session.username}]],
                vname:''
            }
        },
        created() {
            this.init()
        },
        mounted() {
            //声明调用js的方法jsfunction的时候，调用vue的方法：vuefunction
            window.jsfunction = this.vuefunction;
        },
        methods: {
            vuefunction(){
                var pubkey =  [[${publicKey}]]
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(pubkey);
                var encryName = encrypt.encrypt(BASE64.encoder(this.vname))
                var x = document.getElementById("name")
                    x.value= encryName
                this.vname = encryName
                // var jsName = document.getElementById("name").value
                console.log(this.vname)
                console.log('000')
            },
            init(){
                if (top.location != location&&this.username==null){
                   this.open()
                }
            },
            open() {
                this.$alert('登录过期，请重新登录', {
                    confirmButtonText: '确定',
                    callback: action => {
                        top.location.href = location.href;
                    }
                });
            }
        }
    })

</script>
</html>